<template>
    <div class="pagination">
        
        <button :disabled="pageNo == startEnd.start" @click="$emit('pageChange',pageNo-1)">上一页</button>
        <button v-if="startEnd.start > 1" @click="$emit('pageChange',1)">1</button>
        <button v-if="startEnd.start > 2">...</button>
       <button
           :class="{active:page == pageNo}"
           v-for="page in startEnd.end"
           v-if="page >= startEnd.start"
           @click="$emit('pageChange',page)"
       >
           {{page}}
       </button>
        <button v-if="startEnd.end < pageTotal-1">...</button>
        <button v-if="startEnd.end < pageTotal" @click="$emit('pageChange',pageTotal)">{{pageTotal}}</button>
        <button :disabled="pageNo == startEnd.end" @click="$emit('pageChange',pageNo+1)">下一页</button>
        
        <button style="margin-left: 30px">共 {{total}} 条</button>
    </div>
</template>

<script>
export default {
    name: "Pagination",
    props:{
        //当前页
        pageNo:{
            type:Number,
            required:true,
        },
        //每页显示条数
        pageSize: {
            type:Number,
            require:true
        },
        //总条数
        total: {
            require: true
        },
        //连续数
        pageCount:{
            type:Number,
            require:true
        }
    },
    computed:{
        //总页数
        pageTotal(){
            return Math.ceil((this.total / this.pageSize));
        },
        //计算页码的起始位置和结束位置
        startEnd(){
            const {pageNo,PageSize,total,pageCount,pageTotal} = this;
            let start = 0;
            let end = 0;
            //总页数小于连续式
            if (pageTotal < pageCount){
                start = 1;
                end = pageTotal;
            }else {
                start = pageNo-Math.floor((pageCount/2));
                end = pageNo+Math.floor((pageCount/2));
                if (start<1){
                    start = 1;
                    end = pageCount
                }
                if (end > pageTotal){
                    start = pageTotal-pageCount+1;
                    end = pageTotal;
                }
            }
            return{
                start,
                end
            }
        }
    }
}
</script>

<style lang="less" scoped>
.pagination {
    button {
        margin: 0 5px;
        background-color: #f4f4f5;
        color: #606266;
        outline: none;
        border-radius: 2px;
        padding: 0 4px;
        vertical-align: top;
        display: inline-block;
        font-size: 13px;
        min-width: 35.5px;
        height: 28px;
        line-height: 28px;
        cursor: pointer;
        box-sizing: border-box;
        text-align: center;
        border: 0;
        
        &[disabled] {
            color: #c0c4cc;
            cursor: not-allowed;
        }
        
        &.active {
            cursor: not-allowed;
            background-color: #409eff;
            color: #fff;
        }
    }
}
</style>